<template lang='pug'>
.citySelect
  .sl-content
    .header
      .tit
        | 请选择
        a(href="javascript:;",@click="close").close
      nav
        a(href="javascript:;").active 城市
    .list
      ul
        li(v-for="(item,index) in adata",@click="choice(item,index)",:class="[item.mdmCityCode==beforePosition.cityCode?'active':'']") {{item.cityName}}
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  methods: {
    close() {
       this.$emit('closeselectCity')
    },
    choice (item,index) {
      if (item.mdmCityCode == this.$store.state.beforePosition.cityCode) {
        return
      }
      let p = {
        cityName: item.cityName,
        cityCode: item.mdmCityCode,
      }
      let d = {
        pathName: '',
        houseNumber: '',
      }
      this.$store.commit('AssignDetailAddress',d)
      this.$store.commit('setBeforePosition',p)
      this.selectedIndex = index
      this.$emit('closeselectCity')
    },
  },
  props:['adata'],
  computed: {
    ...mapGetters([
      'beforePosition'
    ])
  }
}
</script>
<style lang='scss' scoped>
@import '../tool.scss';
.citySelect {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  top: 0;
  left: 0;
  z-index: 100;
  .sl-content {
    width: 100%;
    height: _(784);
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    .header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: _(161);
      .tit {
        width: 100%;
        height: _(88);
        text-align: center;
        line-height: _(88);
        box-shadow: 0 1px 0 0 #f0f0f0;
        position: relative;
        .close {
          display: block;
          position: absolute;
          top: _(28);
          right: _(41);
          width: _(32);
          height: _(32);
          background-image: url('/static/images/close.png');
          background-size: 100% 100%;
        }
      }
      nav {
        width: 100%;
        height: _(73);
        line-height: _(73);
        display: flex;
        justify-content: space-around;
        a {
          display: inline-block;
          box-sizing: border-box;
          font-size: _(26);
          padding: 0 _(40);
          color: #333;
        }
        .active {
          color: #ff7c33;
          border-bottom: 1px solid #ff7c33;
        }
        .unuseful {
          color: #999;
        }
      }
    }
    .list {
      width: 100%;
      height: _(623);
      margin-top: _(161);
      overflow-y: scroll;
      ul {
        li {
          width: 100%;
          height: _(89);
          line-height: _(89);
          color: #333;
          font-size: _(26);
          text-indent: _(40);
        }
        .active {
          background-color: #f7f7f7;
        }
      }
    }
  }
}
</style>  